<template>
  <el-dialog
    title="评价下级"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="evalcontent"
  >
    <div class="jiazhititle">价值观行为考核要素</div>
    <div class="sourpont">
      <div class="flexcont">
        <div class="sortitle">用户至上 <span>*</span></div>
        <div class="flexcont"><el-input v-model="dataForm.firstValueScore" placeholder="请在1～5选一个数字输入" maxlength="1" type="number" max="5" min="1"></el-input><span>分</span></div>
      </div>
      <div v-show="dataForm.firstValueScore==1||dataForm.firstValueScore==5">
        <div class="illtitle">请对您的评分进行举例说明 <span>*</span></div>
        <div class="illcontent">
          <el-input v-model="dataForm.firstValueDescribe" type="textarea" :rows="3" maxlength="500"></el-input>
        </div>
        <div class="illtitle">点击上传图片进行补充说明（选填）</div>
        <div class="illcontent">
          <el-upload
            :action="url"
            list-type="picture-card"
            :before-upload="handlePictureCardPreview"
            :on-success="PictureCardPreview1"
            :file-list="fileLists1"
            :on-remove="beforeRemove1"
            limit="3"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </div>
    </div>
    <div class="sourpont">
      <div class="flexcont">
        <div class="sortitle">正直坦诚 <span>*</span></div>
        <div class="flexcont"><el-input v-model="dataForm.secondValueScore" placeholder="请在1～5选一个数字输入" maxlength="1" type="number" max="5" min="1"></el-input><span>分</span></div>
      </div>
      <div v-show="dataForm.secondValueScore==1||dataForm.secondValueScore==5">
        <div class="illtitle">请对您的评分进行举例说明 <span>*</span></div>
        <div class="illcontent">
          <el-input v-model="dataForm.secondValueDescribe" type="textarea" :rows="3" maxlength="500"></el-input>
        </div>
        <div class="illtitle">点击上传图片进行补充说明（选填）</div>
        <div class="illcontent">
          <el-upload
            :action="url"
            list-type="picture-card"
            :before-upload="handlePictureCardPreview"
            :on-success="PictureCardPreview2"
            :file-list="fileLists2"
            :on-remove="beforeRemove2"
            limit="3"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </div>
    </div>
    <div class="sourpont">
      <div class="flexcont">
        <div class="sortitle">极致执行 <span>*</span></div>
        <div class="flexcont"><el-input v-model="dataForm.thirdValueScore" placeholder="请在1～5选一个数字输入" maxlength="1" type="number" max="5" min="1"></el-input><span>分</span></div>
      </div>
      <div v-show="dataForm.thirdValueScore==1||dataForm.thirdValueScore==5">
        <div class="illtitle">请对您的评分进行举例说明 <span>*</span></div>
        <div class="illcontent">
          <el-input v-model="dataForm.thirdValueDescribe" type="textarea" :rows="3" maxlength="500"></el-input>
        </div>
        <div class="illtitle">点击上传图片进行补充说明（选填）</div>
        <div class="illcontent">
          <el-upload
            :action="url"
            list-type="picture-card"
            :before-upload="handlePictureCardPreview"
            :on-success="PictureCardPreview3"
            :file-list="fileLists3"
            :on-remove="beforeRemove3"
            limit="3"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </div>
    </div>
    <div class="sourpont">
      <div class="flexcont">
        <div class="sortitle">精进创新 <span>*</span></div>
        <div class="flexcont"><el-input v-model="dataForm.fourthValueScore" placeholder="请在1～5选一个数字输入" maxlength="1" type="number" max="5" min="1"></el-input><span>分</span></div>
      </div>
      <div v-show="dataForm.fourthValueScore==1||dataForm.fourthValueScore==5">
        <div class="illtitle">请对您的评分进行举例说明 <span>*</span></div>
        <div class="illcontent">
          <el-input v-model="dataForm.fourthValueDescribe" type="textarea" :rows="3" maxlength="500"></el-input>
        </div>
        <div class="illtitle">点击上传图片进行补充说明（选填）</div>
        <div class="illcontent">
          <el-upload
            :action="url"
            list-type="picture-card"
            :before-upload="handlePictureCardPreview"
            :on-success="PictureCardPreview4"
            :file-list="fileLists4"
            :on-remove="beforeRemove4"
            limit="3"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </div>
    </div>
    <div class="sourpont">
      <div class="flexcont">
        <div class="sortitle">团结共赢 <span>*</span></div>
        <div class="flexcont"><el-input v-model="dataForm.fifthValueScore" placeholder="请在1～5选一个数字输入" maxlength="1" type="number" max="5" min="1"></el-input><span>分</span></div>
      </div>
      <div v-show="dataForm.fifthValueScore==1||dataForm.fifthValueScore==5">
        <div class="illtitle">请对您的评分进行举例说明 <span>*</span></div>
        <div class="illcontent">
          <el-input v-model="dataForm.fifthValueDescribe" type="textarea" :rows="3" maxlength="500""></el-input>
        </div>
        <div class="illtitle">点击上传图片进行补充说明（选填）</div>
        <div class="illcontent">
          <el-upload
            :action="url"
            list-type="picture-card"
            :before-upload="handlePictureCardPreview"
            :on-success="PictureCardPreview5"
            :file-list="fileLists5"
            :on-remove="beforeRemove5"
            limit="3"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">返回</el-button>
      <el-button type="primary" @click="dataFormSubmit()" >确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  export default {
    name: 'examinevaluate',
    data() {
      return {
        visible: false,
        fileLists1: [],
        fileLists2: [],
        fileLists3: [],
        fileLists4: [],
        fileLists5: [],
        disableds: false,
        dataForm: {},
        url: '',
        dialogVisible: false,
        dialogImageUrls: '',
        iskans: false,
        title: '',
        ischange: 0
      }
    },
    mounted() {
      this.url = this.$http.adornUrl(
        `/operate/shareInfo/upload?token=${this.$cookie.get('token')}`
      )
    },
    methods: {
      init(id, ischange) {
        this.ischange = ischange
        this.visible = true
        this.$nextTick(() => {
          if(ischange===1) {
            this.$http({
              url: this.$http.adornUrl(
                `/value/valuecommentlog/getSelfOrStaffEvaluationResult`
              ),
              method: 'get',
              params: this.$http.adornParams({valueId:id, evaluationType:2})
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm = data.result
                this.dataForm.firstValueScore = parseInt(this.dataForm.firstValueScore)
                this.dataForm.secondValueScore = parseInt(this.dataForm.secondValueScore)
                this.dataForm.thirdValueScore = parseInt(this.dataForm.thirdValueScore)
                this.dataForm.fourthValueScore = parseInt(this.dataForm.fourthValueScore)
                this.dataForm.fifthValueScore = parseInt(this.dataForm.fifthValueScore)
                let imglist1=[]
                let imglist2=[]
                let imglist3=[]
                let imglist4=[]
                let imglist5=[]
                if(this.dataForm.firstValueImg) {
                  this.dataForm.firstValueImg.map((item, index)=> {
                    imglist1.push({name: index, url: item})
                  })
                }
                if(this.dataForm.secondValueImg) {
                  this.dataForm.secondValueImg.map((item, index)=> {
                    imglist2.push({name: index, url: item})
                  })
                }
                if(this.dataForm.thirdValueImg) {
                  this.dataForm.thirdValueImg.map((item, index)=> {
                    imglist3.push({name: index, url: item})
                  })
                }
                if(this.dataForm.fourthValueImg) {
                  this.dataForm.fourthValueImg.map((item, index)=> {
                    imglist4.push({name: index, url: item})
                  })
                }
                if(this.dataForm.fifthValueImg) {
                  this.dataForm.fifthValueImg.map((item, index)=> {
                    imglist5.push({name: index, url: item})
                  })
                }
                this.fileLists1 = imglist1
                this.fileLists2 = imglist2
                this.fileLists3 = imglist3
                this.fileLists4 = imglist4
                this.fileLists5 = imglist5
              }
            });
          } else {
            this.fileLists1 = []
            this.fileLists2 = []
            this.fileLists3 = []
            this.fileLists4 = []
            this.fileLists5 = []
            this.dataForm = {
              valueId : id || 0
            }
          }
        });
      },
      // 表单提交
      dataFormSubmit() {
        if(!(this.dataForm.firstValueScore&&this.dataForm.secondValueScore&&this.dataForm.thirdValueScore&&this.dataForm.fourthValueScore&&this.dataForm.fifthValueScore)) {
          alert('价值观评分不能为空！')
          return false
        }
        if((this.dataForm.firstValueScore==1||this.dataForm.firstValueScore==5)&&!this.dataForm.firstValueDescribe){
          alert('请举例说明用户至上')
          return false
        }
        if((this.dataForm.secondValueScore==1||this.dataForm.secondValueScore==5)&&!this.dataForm.secondValueDescribe){
          alert('请举例说明正直坦诚')
          return false
        }
        if((this.dataForm.thirdValueScore==1||this.dataForm.thirdValueScore==5)&&!this.dataForm.thirdValueDescribe){
          alert('请举例说明极致执行')
          return false
        }
        if((this.dataForm.fourthValueScore==1||this.dataForm.fourthValueScore==5)&&!this.dataForm.fourthValueDescribe){
          alert('请举例说明精进创新')
          return false
        }
        if((this.dataForm.fifthValueScore==1||this.dataForm.fifthValueScore==5)&&!this.dataForm.fifthValueDescribe){
          alert('请举例说明团结共赢')
          return false
        }

          // 用户至上
          if (!this.isInteger(this.dataForm.firstValueScore)) {
              this.$message.error("用户至上分数请输入整数");
              return false
          }
          if (this.dataForm.firstValueScore > 5 || this.dataForm.firstValueScore < 1) {
              this.$message.error("用户至上数值应该1-5");
              return false
          }
          // 正直坦诚
          if (!this.isInteger(this.dataForm.secondValueScore)) {
              this.$message.error("正直坦诚分数请输入整数");
              return false
          }
          if (this.dataForm.secondValueScore > 5 || this.dataForm.secondValueScore < 1) {
              this.$message.error("正直坦诚数值应该1-5");
              return false
          }

          // 极致执行
          if (!this.isInteger(this.dataForm.thirdValueScore)) {
              this.$message.error("极致执行分数请输入整数");
              return false
          }

          if (this.dataForm.thirdValueScore > 5 || this.dataForm.thirdValueScore < 1) {
              this.$message.error("极致执行数值应该1-5");
              return false
          }
          // 精进创新
          if (!this.isInteger(this.dataForm.fourthValueScore)) {
              this.$message.error("精进创新分数请输入整数");
              return false
          }

          if (this.dataForm.fourthValueScore > 5 || this.dataForm.fourthValueScore < 1) {
              this.$message.error("精进创新数值应该1-5");
              return false
          }
          // 团结共赢
          if (!this.isInteger(this.dataForm.fifthValueScore)) {
              this.$message.error("团结共赢分数请输入整数");
              return false
          }

          if (this.dataForm.fifthValueScore > 5 || this.dataForm.fifthValueScore < 1) {
              this.$message.error("团结共赢数值应该1-5");
              return false
          }

        let imglist1=[]
        let imglist2=[]
        let imglist3=[]
        let imglist4=[]
        let imglist5=[]
        this.dataForm.isComment = 1
        this.dataForm.evaluationType = 2
        if(this.fileLists1.length>0) {
          this.fileLists1.map((item)=> {
            imglist1.push(item.response?item.response.url:item.url)
          })
        }
        if(this.fileLists2.length>0) {
          this.fileLists2.map((item)=> {
            imglist2.push(item.response?item.response.url:item.url)
          })
        }
        if(this.fileLists3.length>0) {
          this.fileLists3.map((item)=> {
            imglist3.push(item.response?item.response.url:item.url)
          })
        }
        if(this.fileLists4.length>0) {
          this.fileLists4.map((item)=> {
            imglist4.push(item.response?item.response.url:item.url)
          })
        }
        if(this.fileLists5.length>0) {
          this.fileLists5.map((item)=> {
            imglist5.push(item.response?item.response.url:item.url)
          })
        }
        this.dataForm.firstValueImg = imglist1
        this.dataForm.secondValueImg = imglist2
        this.dataForm.thirdValueImg = imglist3
        this.dataForm.fourthValueImg = imglist4
        this.dataForm.fifthValueImg = imglist5

          this.$http({
            url: this.$http.adornUrl(
              `/value/valuecommentlog/updateSuperiorEvaluation`
            ),
            method: 'post',
            data: this.$http.adornData(this.dataForm)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });


      },

        isInteger(obj){

            // return  Math.round(obj) === obj   //是整数，则返回true，否则返回false
            return typeof Number(obj) === 'number' && Number(obj)%1 === 0;

        },
      handlePictureCardPreview: function (file) {
        const isJPG = file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/gif'
        if (!isJPG) {
          this.$message.error('上传封面只能是图片!')
        }
        return isJPG
      },
      PictureCardPreview1(response, file, fileList) {
        if (response && response.code === 0) {
          this.fileLists1 = fileList
        } else {
           return this.$message.error(response.msg)
        }
      },
      PictureCardPreview2(response, file, fileList) {
        if (response && response.code === 0) {
          this.fileLists2 = fileList
        } else {
          return this.$message.error(response.msg)
        }
      },
      PictureCardPreview3(response, file, fileList) {
        if (response && response.code === 0) {
          this.fileLists3 = fileList
        } else {
          return this.$message.error(response.msg)
        }
      },
      PictureCardPreview4(response, file, fileList) {
        if (response && response.code === 0) {
          this.fileLists4 = fileList
        } else {
          return this.$message.error(response.msg)
        }
      },
      PictureCardPreview5(response, file, fileList) {
        if (response && response.code === 0) {
          this.fileLists5 = fileList
        } else {
          return this.$message.error(response.msg)
        }
      },
      beforeRemove1(file, fileList) {
        this.fileLists1 = fileList
      },
      beforeRemove2(file, fileList) {
        this.fileLists2 = fileList
      },
      beforeRemove3(file, fileList) {
        this.fileLists3 = fileList
      },
      beforeRemove4(file, fileList) {
        this.fileLists4 = fileList
      },
      beforeRemove5(file, fileList) {
        this.fileLists5 = fileList
      },
    }
  }
</script>
<style lang="scss">
  .noChange .el-form-item__label{
    color: #bbb!important;
  }
  .evalcontent{
    .jiazhititle{
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 10px;
    }
    .sourpont{
      padding: 20px 0;
    }
    .flexcont{
      display: flex;
      align-items: center;
      .sortitle{
        span{
          color: red;
        }
      }
      .el-input{
        width: 300px;
        margin: 0 10px 0 50px;
      }
    }
    .illtitle{
      margin: 20px 0 15px 0;
      span{
        color: red;
      }
    }
  }
</style>
